<!-- Floating Buttons start-->
<section id="floating-point">
	<div class="row">
		<div class="col-12 mb-1">
			<h4 class="text-uppercase">Floating Buttons</h4>
			<p>Floating action buttons are used for a special type of promoted action. They are distinguished by a circled icon floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point. </p>
			<p>Use the class <code>.btn</code> along with class <code>.btn-float</code>.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Floating Buttons</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Floating icon button Regular -->
									<a href="#" class="btn btn-float btn-square btn-secondary"><i class="la la-thumbs-o-up"></i></a>
								<a href="#" class="btn btn-float btn-square btn-float-lg btn-primary"><i class="la la-camera"></i></a>
									<a href="#" class="btn btn-float btn-square btn-secondary"><i class="la la-thumbs-o-down"></i></a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Floating button Regular with text -->
									<a href="#" class="btn btn-float btn-cyan"><i class="la la-search"></i><span>search</span></a>
								<a href="#" class="btn btn-float btn-float-lg btn-pink"><i class="la la-cloud-download"></i><span>Downloads</span></a>
									<a href="#" class="btn btn-float btn-cyan"><i class="la la-refresh"></i><span>refresh</span></a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Regular Round Floating button -->
									<a href="#" class="btn btn-float btn-round btn-secondary"><i class="la la-thumbs-o-up"></i></a>
								<a href="#" class="btn btn-float btn-round btn-float-lg btn-primary"><i class="la la-camera"></i></a>
									<a href="#" class="btn btn-float btn-round btn-secondary"><i class="la la-thumbs-o-down"></i></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Floating Buttons end -->



<!-- Floating Outline Buttons start-->
<section id="floating-outline-buttons">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Floating Outline Buttons</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Floating icon Outline button -->
									<button type="button" class="btn btn-float btn-square btn-outline-secondary"><i class="la la-thumbs-o-up"></i></button>
								<button type="button" class="btn btn-float btn-square btn-float-lg btn-outline-primary"><i class="la la-camera"></i></button>
									<button type="button" class="btn btn-float btn-square btn-outline-secondary"><i class="la la-thumbs-o-down"></i></button>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Floating Outline button with text -->
									<button type="button" class="btn btn-float btn-outline-cyan"><i class="la la-search"></i><span>search</span></button>
								<button type="button" class="btn btn-float btn-float-lg btn-outline-pink"><i class="la la-cloud-download"></i><span>Downloads</span></button>
									<button type="button" class="btn btn-float btn-outline-cyan"><i class="la la-refresh"></i><span>refresh</span></button>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Outline Round Floating button -->
									<button type="button" class="btn btn-float btn-outline-secondary btn-round"><i class="la la-thumbs-o-up"></i></button>
								<button type="button" class="btn btn-float btn-float-lg btn-outline-primary btn-round"><i class="la la-camera"></i></button>
									<button type="button" class="btn btn-float btn-outline-secondary btn-round"><i class="la la-thumbs-o-down"></i></button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Floating Outline Buttons end -->



<!-- Social Buttons for Bootstrap start-->
<section id="social-buttons">
	<div class="row mt-3">
		<div class="col-12 mb-1">
			<h4 class="text-uppercase">Social Buttons for Bootstrap</h4>
			<p>Buttons with built-in loading indicators, effectively bridging the gap between action and feedback.</p>
		</div>
	</div>
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Social Media Buttons</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group">
									<!-- Social Buttons with Social Name -->	
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-facebook"><i class="la la-facebook"></i> Facebook</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-reddit"><span class="la la-reddit font-medium-3"></span> Reddit</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-twitter"><span class="la la-twitter"></span> Twitter</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-github"><i class="la la-github font-medium-3"></i> Github</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-vimeo"><span class="la la-vimeo-square font-medium-3"></span> Vimeo</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-pinterest"><span class="la la-pinterest-p font-medium-3"></span> Pinterest</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-tumblr"><span class="la la-tumblr font-medium-3"></span> Tumblr</a>
									<a href="#" class="btn btn-social btn-min-width mr-1 mb-1 btn-yahoo"><span class="la la-yahoo font-medium-3"></span> Yahoo</a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<!-- Social Icon Buttons -->
								<div class="form-group">
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-adn"><span class="la la-adn"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-bitbucket"><span class="la la-bitbucket font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-dropbox"><span class="la la-dropbox font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-facebook"><span class="la la-facebook"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-flickr"><span class="la la-flickr font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-foursquare"><span class="la la-foursquare font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-github"><span class="la la-github font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-google"><span class="la la-google font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-instagram"><span class="la la-instagram font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-linkedin"><span class="la la-linkedin font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-microsoft"><span class="la la-windows font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-odnoklassniki"><span class="la la-odnoklassniki font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-openid"><span class="la la-openid font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-pinterest"><span class="la la-pinterest-p font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-reddit"><span class="la la-reddit font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-soundcloud"><span class="la la-soundcloud"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-tumblr"><span class="la la-tumblr font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-twitter"><span class="la la-twitter"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-vimeo"><span class="la la-vimeo-square font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-vk"><span class="la la-vk font-medium-3"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-yahoo"><span class="la la-yahoo font-medium-3"></span></a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
								<div class="form-group">
									<!-- Social Buttons large name -->
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-adn"><span class="la la-adn font-medium-3"></span> Sign in with App.net</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-dropbox"><span class="la la-dropbox font-medium-3"></span> Sign in with dropbox</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-flickr"><span class="la la-flickr font-medium-3"></span> Sign in with flickr</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-github"><span class="la la-github font-medium-3"></span> Sign in with github</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-google"><span class="la la-google font-medium-3"></span> Sign in with google</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-facebook"><span class="la la-facebook"></span> Sign in with facebook</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-foursquare"><span class="la la-foursquare font-medium-3"></span> Sign in with foursquare</a>
									<a href="#" class="btn btn-social width-200 mr-1 mb-1 btn-bitbucket"><span class="la la-bitbucket font-medium-3"></span> Sign in with bitbucket</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Social Buttons for Bootstrap end -->



<!-- Social Media Buttons Size start-->
<section id="social-buttons-sizes">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Social Media Buttons Size</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group">
									<!-- Social Buttons block size-->
									<a href="#" class="btn btn-social btn-block mb-1 btn-github"><i class="la la-github"></i> Github</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-flickr"><span class="la la-flickr"></span> Flickr</a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Social Buttons sizes -->
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social mb-1 mr-1 btn-lg btn-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-sm btn-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-xs btn-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social mb-1 mr-1 btn-lg btn-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-sm btn-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-xs btn-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
										</div>
									</div>
									<!-- Social icon Buttons Sizes -->								
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-lg btn-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-sm btn-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-xs btn-soundcloud"><span class="la la-soundcloud"></span></a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social-icon btn-lg mb-1 mr-1 btn-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon btn-sm mb-1 mr-1 btn-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon btn-xs mb-1 mr-1 btn-github"><i class="la la-github"></i></a>
										</div>
									</div>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
								<div class="form-group">
									<!-- Social Buttons block sizes -->
									<a href="#" class="btn btn-social mb-1 btn-block btn-lg btn-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-sm btn-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-xs btn-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Social Media Buttons Size end -->



<!-- Social Media Outline Buttons start-->
<section id="social-outline-buttons">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Social Media Outline Buttons</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group">
									<!-- Social Outline Buttons -->
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-facebook"><i class="la la-facebook"></i> Facebook</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-reddit"><span class="la la-reddit font-medium-4"></span> Reddit</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-twitter"><span class="la la-twitter font-medium-4"></span> Twitter</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-github"><i class="la la-github font-medium-4"></i> Github</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-vimeo"><span class="la la-vimeo-square font-medium-4"></span> Vimeo</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-pinterest"><span class="la la-pinterest-p font-medium-4"></span> Pinterest</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-tumblr"><span class="la la-tumblr font-medium-4"></span> Tumblr</a>
									<a href="#" class="btn btn-social btn-min-width mb-1 mr-1 btn-outline-yahoo"><span class="la la-yahoo font-medium-4"></span> Yahoo</a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group">
									<!-- Social Icons Outline Buttons -->
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-adn"><span class="la la-adn"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-bitbucket"><span class="la la-bitbucket font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-dropbox"><span class="la la-dropbox font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-facebook"><span class="la la-facebook"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-flickr"><span class="la la-flickr font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-foursquare"><span class="la la-foursquare font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-github"><span class="la la-github font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-google"><span class="la la-google font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-instagram"><span class="la la-instagram font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-linkedin"><span class="la la-linkedin font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-microsoft"><span class="la la-windows font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-odnoklassniki"><span class="la la-odnoklassniki font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-openid"><span class="la la-openid font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-pinterest"><span class="la la-pinterest-p font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-reddit"><span class="la la-reddit font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-tumblr"><span class="la la-tumblr font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-twitter"><span class="la la-twitter"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-vimeo"><span class="la la-vimeo-square font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-vk"><span class="la la-vk font-medium-4"></span></a>
									<a href="#" class="btn btn-social-icon mr-1 mb-1 btn-outline-yahoo"><span class="la la-yahoo font-medium-4"></span></a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
								<div class="form-group">
									<!-- Social Outline Buttons with text -->
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-adn"><span class="la la-adn font-medium-4"></span> Sign in with App.net</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-dropbox"><span class="la la-dropbox font-medium-4"></span> Sign in with dropbox</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-flickr"><span class="la la-flickr font-medium-4"></span> Sign in with flickr</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-github"><span class="la la-github font-medium-4"></span> Sign in with github</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-google"><span class="la la-google font-medium-4"></span> Sign in with google</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-facebook"><span class="la la-facebook"></span> Sign in with facebook</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-foursquare"><span class="la la-foursquare font-medium-4"></span> Sign in with foursquare</a>
									<a href="#" class="btn btn-social width-200 mb-1 mr-1 btn-outline-bitbucket"><span class="la la-bitbucket font-medium-4"></span> Sign in with bitbucket</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Social Media Outline Buttons end -->



<!-- Social Media Outline Buttons Size start-->
<section id="social-outline-buttons-sizes">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Social Media Outline Buttons Size</h4>
					<a class="heading-elements-toggle"><i class="la la-ellipsis font-medium-3"></i></a>
					<div class="heading-elements">
						<ul class="list-inline mb-0">
							<li><a data-action="collapse"><i class="ft-minus"></i></a></li>
							<li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
							<li><a data-action="expand"><i class="ft-maximize"></i></a></li>
							<li><a data-action="close"><i class="ft-x"></i></a></li>
						</ul>
					</div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
						<div class="row">
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group">
									<!-- Social Outline Block Buttons Here-->
									<a href="#" class="btn btn-social btn-block mb-1 btn-outline-github"><i class="la la-github"></i> Github</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span> Soundcloud</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-outline-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-outline-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
									<a href="#" class="btn btn-social btn-block mb-1 btn-outline-flickr"><span class="la la-flickr"></span> Flickr</a>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1">
								<div class="form-group text-center">
									<!-- Social Outline Buttons sizes -->
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social mb-1 mr-1 btn-lg btn-outline-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-outline-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-sm btn-outline-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-xs btn-outline-yahoo"><span class="la la-yahoo"></span> Yahoo</a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social mb-1 mr-1 btn-lg btn-outline-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-outline-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-sm btn-outline-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
											<a href="#" class="btn btn-social mb-1 mr-1 btn-xs btn-outline-vimeo"><span class="la la-vimeo-square"></span> Vimeo</a>
										</div>
									</div>
									<!-- Social Outline Icon Buttons sizes -->
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-lg btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-sm btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-xs btn-outline-soundcloud"><span class="la la-soundcloud"></span></a>
										</div>
									</div>
									<div class="row">
										<div class="col-12">
											<a href="#" class="btn btn-social-icon btn-lg mb-1 mr-1 btn-outline-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon mb-1 mr-1 btn-outline-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon btn-sm mb-1 mr-1 btn-outline-github"><i class="la la-github"></i></a>
											<a href="#" class="btn btn-social-icon btn-xs mb-1 mr-1 btn-outline-github"><i class="la la-github"></i></a>
										</div>
									</div>
								</div>
							</div>
							<div class="col-xl-4 col-lg-12 mb-1 social-buttons">
								<div class="form-group">
									<!-- Social Outline block Buttons sizes -->
									<a href="#" class="btn btn-social mb-1 btn-block btn-lg btn-outline-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-outline-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-sm btn-outline-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
									<a href="#" class="btn btn-social mb-1 btn-block btn-xs btn-outline-pinterest"><span class="la la-pinterest-p"></span> Sign in with Pinterest</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- Social Media Outline Buttons Size end -->